<template>
  <div class="area">
    <el-aside width="550px">
      <!-- 区域 -->
      <div class="area" :class="{ active: isshow }">
        <el-col :span="3"> 区域:</el-col>
        <el-col :span="20">
          <span v-for="(item, index) in getEverycity" :key="index"
            >{{ item.name }}&nbsp;&nbsp;</span
          >
        </el-col>
      </div>
      <p @click="isshow = !isshow" v-if="getEverycity" class="pPading">
        <i
          class="el-icon-d-arrow-right icon"
          :style="
            isshow ? 'transform: rotate(90deg)' : 'transform: rotate(-90deg)'
          "
        ></i>
        等{{ getEverycity.length }}个区域
      </p>
      <!-- 均价 -->
      <div class="price">
        <el-col :span="3"> 均价 <i class="el-icon-question"></i>: </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="8">
              <span>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </span>
              <span> ￥332 </span>
            </el-col>
            <el-col :span="8">
              <span>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </span>
              <span> ￥521 </span>
            </el-col>
            <el-col :span="8">
              <span>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </span>
              <span> ￥768 </span>
            </el-col>
          </el-row>
        </el-col>
      </div>
    </el-aside>

    <!-- 地图 -->
    <!-- <div class="map">
      <div id="container"></div>
    </div> -->
  </div>
</template>

<script>
import { postcities, cityposition } from "@/api/post.js";

export default {
  props: ["c"],
  data() {
    return {
      getTown: "",
      getEverycity: "",
      tt: "12",
      isshow: true,
      citydetailId: "",
      price: "",
    };
  },

  methods: {
    async getcity(city) {
      // 重新发送请求
      let citiesRes = await postcities(city);
      console.log(citiesRes); //获取了各个城市的数据
      if (citiesRes && citiesRes.data.data[0]) {
        this.citydetailId = citiesRes.data.data[0].id;
        this.getEverycity = citiesRes.data.data[0].scenics;
        console.log(id);
      }
    },
  },
  // 监听路由的时候的变化
  watch: {
    async $route() {
      this.getTown = this.$route.query.cityName;
      // 重新发送请求
      let citiesRes = await postcities(this.getTown);
      console.log(citiesRes); //获取了各个城市的数据
      if (citiesRes && citiesRes.data.data[0]) {
        this.citydetailId = citiesRes.data.data[0].id;
        this.getEverycity = citiesRes.data.data[0].scenics;
        // console.log(this.citydetailId); //197
      }
      let data = {
        city: this.citydetailId ? this.citydetailId : "", //ID
      };
      // 获取位置请求
      let pisotioncity = await cityposition(data);
      this.$emit("getposition", pisotioncity);
      console.log(pisotioncity); //  这个是获取10 个位置的地位
    },
  },
  async mounted() {
    // 默认进入页面的时候获取路由参数
    this.getTown = this.$route.query.cityName;
    // 重新发送请求
    let citiesRes = await postcities(this.getTown);
    console.log(citiesRes); //获取了各个城市的数据
    if (citiesRes && citiesRes.data.data[0]) {
      this.citydetailId = citiesRes.data.data[0].id;
      this.getEverycity = citiesRes.data.data[0].scenics;
      // console.log(this.citydetailId); 这个是获取10 个位置的地位
    }
    //定义一组获取的数据
    let data = {
      city: this.citydetailId ? this.citydetailId : "", //ID
    };
    let pisotioncity = await cityposition(data);
    this.$emit("getposition", pisotioncity);

    console.log(pisotioncity);
  },
  methods: {
    getareaNum() {},
  },
};
</script>

<style lang="less" scoped>
// 区域
.right-width {
  width: 560;
}
.town {
  color: #666666;
  margin-right: 10px;
  display: inline-block;
}
.area-left-position {
  display: block;
  margin-right: 15px;
  width: 50px;
  color: #666666;
}
.area {
  display: flex;
  .areaMuch {
    ::before {
      content: "el-icon-d-arrow-right";
    }
  }
  .area-position {
    width: 570px;
    margin-bottom: 20px;
    .area-position-right {
      margin-right: 10px;
      float: left;
    }
    .area-position-left {
      float: left;
      display: block;
      margin-right: 15px;
      width: 50px;
      color: #666666;
    }
  }
  .area-place {
    padding-left: 5px;
    padding-right: 5px;
    flex: 65%;
    // display: flex;
    width: 560;
    flex-direction: column;
  }
  .map {
    flex: 420px;
  }
}
// #container {
//   width: 420px;
//   height: 260px;
// }
// 区域部分
.el-icon-d-arrow-right {
  color: #f90;
  transform: rotate(90deg);
}

// 皇冠区域
.area-price {
  display: flex;
}
.area-price-left {
  position: relative;
  margin-right: 15px;
  width: 50px;
  color: #666666;
  padding-right: 10px;
}

.el-icon-question {
  color: #ccc;
  font-size: 17px;
  position: absolute;
}
#el-icon-trophy {
  color: #f90;
  font-size: 16px;
}
.area-price-money {
  margin-left: 8px;
  font-size: 14px;
  color: #666666;
}
.area-price-right {
  display: flex;
}
.huanggun {
  margin-right: 16px;
}
.el-icon-question {
  color: #ccc;
}
.el-icon-star-on {
  color: #e8a33b;
}
.el-icon-d-arrow-right {
  color: #e8a33b;
}
.el-container {
  margin: 20px 0;
}
.el-aside {
  // height: 300px;
  .el-col {
    margin-bottom: 10px;
    line-height: 30px;
  }
  .area {
    width: 100%;
    // height: 60px;
    overflow: hidden;
  }
  p {
    cursor: pointer;
  }
  .active {
    height: 60px;
  }
  .pPading {
    margin-left: 65px;
  }
}
</style>